<template>
    <div>
        <el-card class="crumbs-card">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/main/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/main/first' }">用户列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </el-card>
        <el-card class="container">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="用户名">
                    <el-input placeholder="用户名" v-model="queryName">
                    </el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input placeholder="身份证号" v-model="queryIdNum">
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input placeholder="手机号" v-model="queryPhoneNum">
                    </el-input>
                </el-form-item>
                <el-form-item  label=" 用户类型
                    " >
                    <el-select placeholder="用户类型" v-model="queryType">
                        <el-option label="普通用户" value="1"></el-option>
                        <el-option label="管理员" value="2"></el-option>
                        <el-option value="" label="所有"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit()">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="userList"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="password"
                        label="密码">
                </el-table-column>
                <el-table-column
                        prop="phoneNum"
                        label="手机号">
                </el-table-column>
                <el-table-column
                        prop="idNum"
                        label="身份证号">
                </el-table-column>
                <el-table-column
                        label="用户类型">
                    <template slot-scope="scope">
                        {{scope.row.userType === 1?'管理员':'普通用户'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="pageSizeChange"
                    @current-change="pageNoChange"
                    :background="true"
                    :current-page="pageNo"
                    :page-sizes="[10, 20, 40,100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
            <el-dialog
                    title="用户编辑"
                    :visible.sync="dialogVisible"
                    width="30%">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input v-model="idNum"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="phoneNum"></el-input>
                    </el-form-item>
                    <el-form-item label="用户类型">
                        <el-select v-model="userType" placeholder="请选择">
                            <el-option value="1" label="管理员"></el-option>
                            <el-option value="2" label="普通用户"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save()">确 定</el-button>
  </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import {pageUserList, deleteUser, updateUser} from '@api/user'

export default {
  name: 'UserList',
  data: function () {
    return {
      dialogVisible: false,
      userList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      queryName: '',
      queryType: '',
      queryIdNum: '',
      queryPhoneNum: '',
      id: '',
      name: '',
      pwd: '',
      userType: '',
      idNum: '',
      phoneNum: ''
    }
  },
  methods: {
    onSubmit () {
      pageUserList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        username: this.queryName,
        userType: this.queryType,
        idNum: this.queryIdNum,
        phoneNum: this.queryPhoneNum
      }).then(res => {
        this.userList = res.data.records
        this.total = res.data.total
      })
    },
    save () {
      let user = {
        id: this.id,
        username: this.username,
        password: this.pwd,
        userType: this.userType
      }
      updateUser(user).then(res => {
        if (res.status) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.queryUser()
        }
      })
    },
    handleEdit (user) {
      console.log(user)
      this.id = user.id
      this.name = user.username
      this.pwd = user.password
      this.idNum = user.idNum
      this.phoneNum = user.phoneNum
      this.userType = '' + user.userType
      this.dialogVisible = true
    },
    handleDelete (id) {
      this.$confirm('是否删除用户', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(id)
        deleteUser(id).then(res => {
          console.log(res)
          if (res.status) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.queryUser()
          }
        })
      })
    },
    queryUser () {
      pageUserList({pageNo: this.pageNo, pageSize: this.pageSize}).then(res => {
        console.log(res)
        this.userList = res.data.records
        this.total = res.data.total
      })
    },
    pageSizeChange (value) {
      console.log(value)
      this.pageSize = value
      this.queryUser()
    },
    pageNoChange (value) {
      console.log(value)
      this.pageNo = value
      this.queryUser()
    }

  },
  created () {
    // 页面加载执行
    this.queryUser()
  }
}
</script>

<style scoped>

</style>
